<style>
	body,uni-page-body ,.content{
		height: 100% !important;
	}
	.c1{
		/*display: grid;
		grid-template-rows: auto 80px;*/
		    height: 100%;
	}
	.c2{
		    width: 100%;
	}
	.c3{
		bottom: 0px;
		    position: fixed;
	}
	.img1 img{
		height: 80px;
		width: 100%;
	}
	.c5{
		height: 100%;
	}
	.c5{
		display: grid;
		grid-template-columns: 18px 40px auto 18px;
	}
	.lr{
		width: auto;
		height: 18px;
	}
	.c7{
		/*display: grid;
		grid-template-rows: auto auto auto;*/
		height: 50px;
		background: #f4f2f5;
		padding-left: 15px;
		padding-right: 15px;

	}
	.cc7{
		    position: fixed;
    width: 100%;
	}
	.c10{
		display: grid;
		grid-template-rows: auto 22px auto;
	}
	body,uni-page-body{
		font: 14px / 1.6 -apple-system-font, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Arial, sans-serif;
	}
	body,uni-page-body{
/*		font-family: Helvetica, Tahoma, Arial, Hiragino Sans GB, Hiragino Sans GB W3, Microsoft YaHei, STXihei, STHeiti, Heiti, SimSun, sans-serif;*/
	}
	.r2{
		height: 12px;
	}
	.ch2{
		font-size: 12px;
	}
	.ch1{
		font-size: 13px;
	}
	.pt{
		padding-top: 5px;
	}
	.c11{
		display: grid;
		grid-template-columns:  repeat(6, auto);
	}
	.c12{
		background: #f4f2f5;
		position: fixed;
    bottom: 0px;
    width: 100%;
    /*padding-left: 15px;
    padding-right: 15px;*/
        padding-bottom: 10px;
            border-top: 1px solid #9999991f;
	}
	.c11 img{
		height: 20px;
    width: 20px;
	}
	.c11 view{
		text-align: center;
	}
	.c13{
		display: grid;
		grid-template-columns: auto 65px;
		grid-column-gap: 10px;
		margin-top: 5px;
		margin-bottom:12px;
		    margin-left: 15px;
    margin-right: 15px;
/*    */
    margin-left: 15px;
/**/
	}
	.c13 input{
		background: #fff;
    border-radius: 6px;
    height: 35px;
	}
	.c14{
		    text-align: center;
    line-height: 35px;
    background: #7ac7ff;
        border-radius: 10px;
    color: #ffffff8f;
    font-size: 12px;
	}

	.c18{
		background: #25eb89;
		    height: 10px;
    width: 10px;
    border-radius: 50px;
	}
	.ch2{
		display: grid;
		grid-template-columns: 10px auto;
		grid-column-gap: 5px;
	}
	.ch3{
		margin-top: 3px;
	}
	.contents{
overflow-x: hidden;
	    overflow-y: hidden;
		    background: #f0f2ef;
/*		    position: fixed;*/
    width: 100%;
    height: 100%;
    top: 50px;
	}
	.contents img{
		width: 100%;
		height: 100%;
	}
	.contents {
		    scrollbar-width: none;
	}
	.con50{
		height: 50px;
		width: 100%;
	}
	.title-datetime{
		text-align: center;
		font-size: 10px;
		    color: #888;
		    margin-bottom: 25px;
	}
	.c30{
		padding-top: 10px;
		padding-bottom: 10px;
		    padding-left: 15px;
    padding-right: 15px;
	}

	.c33{
		display: grid;
		grid-template-columns: 35px auto 20%;
		grid-column-gap: 5px;
		margin-bottom: 20px;
	}
	.c33 .text-icon{
		height: 35px;
		width: 35px;
		border-radius: 50px;
	}

.c33-r{
		display: grid;
		grid-template-columns: 20% auto 35px;
		grid-column-gap: 5px;
		margin-bottom: 20px;
	}
	.c33-r .text-icon{
		height: 35px;
		width: 35px;
		border-radius: 50px;
	}
	.c33-r .text-a{
/*		background: #fff;*/
		    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 10px;
        display: table;
        background: #029aff;
        color: #fff;
	}

	.c33-r .text{
		
/*    text-align: right;*/
    display: grid;
    grid-template-columns: repeat(10, auto);

	}
	.c33 .text-a{
		background: #fff;
		    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 10px;
        display: table;
	}
	.r9{
		font-size: 10px;
		
	}
	.r8{
		display: grid;
    grid-template-columns: 20px 12px auto;
		grid-column-gap: 5px;
	}
	.r8 img{
		    margin-top: 1px;
	}
	.text-a.isimg{
		padding:0px;
		background:none;
		border-radius: 10px;
		    width: 100px;
	}
	.text-a{
		    font-size: 12px;
	}
	.bgh{
		height: 78px;
		width: 100%;
	}
	.head{
		    height: 50px;
		    width: 100%;
	}

	/*	*/
	.content{
		overflow-y: scroll;scrollbar-width: none;
	}
	.c7{
		padding-top: 30px;
	}
	.contents{
		padding-top: 30px;
	}
	/*	*/

</style>
<template>
	<view class="content">
		<view class="cc7">
			<view class="c7">
				<view></view>
				<view class="c5">
					<view class="c4 c10">
						<view></view>
						<img @click="toindx()" class="lr" src="static/images/left.jpeg">
						<view></view>
					</view>
					<view class="c10">
						<view></view>
						<img class="lr" src="static/images/99.jpeg">
						<view></view>
					</view>
					<view class="">
						<view></view>
						<view class="pt">
							<view class="ch1">{{fid}}</view>
							<view class="ch2">
								<view class="ch3">
									<view class="c18"></view>
								</view>
								<view class="r8">
									<view class="r9">在线</view>
									<img class="r2" src="static/images/右.png">
									<view></view>
								</view>
							</view>
						</view>
						<view></view>
					</view>
					<view class="c10">
						<view></view>
						<img class="lr" src="static/images/更多.png">
						<view></view>
					</view>
				</view>
				<view></view>
			</view>
		</view>
		<view class="head"></view>
		<view class="contents">
			<view v-for="(valist,index1) in list" >
				<view class="c30" v-for="(vblist,index2) in valist"  >
					<view class="title-datetime" v-if="index2 == 0">
						<!-- 06/05 下午5:22 -->
						{{valist.datetime}}

					</view>
					<view v-if="vblist.status==1">
						<view class="c33">
							<img class="text-icon" :src="baseurl+vblist.image">
							<view class="text">
								<view class="text-a">{{vblist.content}}</view>
							</view>
							<view></view>
						</view>
						<!-- <view class="c33">
							<img class="text-icon" src="@/static/images/lt1.png">
							<view class="text">
								<view class="text-a">在吗？</view>
							</view>
							<view></view>
						</view> -->
					</view>
					<!-- <view class="title-datetime">
						06/05 下午6:10
					</view> -->

					<view v-if="vblist.status==0">
						<view class="c33-r">
							<view></view>
							<view class="text">
								<view></view><view></view><view></view><view></view>
								<view></view><view></view><view></view><view></view>
								<view></view>
								<view class="text-a">{{vblist.content}}</view>
							</view>
							<img class="text-icon" :src="baseurl+vblist.image">
						</view>
						<!-- <view class="c33-r">
							<view></view>
							<view class="text" >
								<view></view><view></view><view></view><view></view>
								<view></view><view></view><view></view><view></view>
								<view></view>
								<view class="text-a">测试！测试！测试！测试！测试！测试！测试！测试！测试！测试！测试！测试！</view>
							</view>
							<img class="text-icon" src="@/static/images/rt2.png">
						</view> -->
						<!-- <view class="c33-r">
							<view></view>
							<view class="text" >
								<view></view><view></view><view></view><view></view>
								<view></view><view></view><view></view><view></view>
								<view></view>
								<view class="text-a isimg"><img  src="@/static/images/abc.jpeg"></view>
							</view>
							<img class="text-icon" src="@/static/images/rt2.png">
						</view>
						<view class="c33-r">
							<view></view>
							<view class="text" >
								<view></view><view></view><view></view><view></view>
								<view></view><view></view><view></view><view></view>
								<view></view>
								<view class="text-a isimg"><img  src="@/static/images/abc.jpeg"></view>
							</view>
							<img class="text-icon" src="@/static/images/rt2.png">
						</view>
						<view class="c33-r">
							<view></view>
							<view class="text" >
								<view></view><view></view><view></view><view></view>
								<view></view><view></view><view></view><view></view>
								<view></view>
								<view class="text-a isimg"><img  src="@/static/images/abc.jpeg"></view>
							</view>
							<img class="text-icon" src="@/static/images/rt2.png">
						</view> -->
					</view>

				</view>
			</view>
			<!-- <view>
				<view class="c30" >
					<view class="title-datetime">
						06/05 下午5:22
					</view>
					<view>
						<view class="c33">
							<img class="text-icon" src="@/static/images/lt1.png">
							<view class="text">
								<view class="text-a">你好:)你好:)你好:)你好:)你好:)你好:)你好:)你好:)你好:)</view>
							</view>
							<view></view>
						</view>
						<view class="c33">
							<img class="text-icon" src="@/static/images/lt1.png">
							<view class="text">
								<view class="text-a">在吗？</view>
							</view>
							<view></view>
						</view>
					</view>
					<view class="title-datetime">
						06/05 下午6:10
					</view>

					<view>
						<view class="c33-r">
							<view></view>
							<view class="text">
								<view></view><view></view><view></view><view></view>
								<view></view><view></view><view></view><view></view>
								<view></view>
								<view class="text-a">在在在在在在在在</view>
							</view>
							<img class="text-icon" src="@/static/images/rt2.png">
						</view>
						<view class="c33-r">
							<view></view>
							<view class="text" >
								<view></view><view></view><view></view><view></view>
								<view></view><view></view><view></view><view></view>
								<view></view>
								<view class="text-a">测试！测试！测试！测试！测试！测试！测试！测试！测试！测试！测试！测试！</view>
							</view>
							<img class="text-icon" src="@/static/images/rt2.png">
						</view>
						<view class="c33-r">
							<view></view>
							<view class="text" >
								<view></view><view></view><view></view><view></view>
								<view></view><view></view><view></view><view></view>
								<view></view>
								<view class="text-a isimg"><img  src="@/static/images/abc.jpeg"></view>
							</view>
							<img class="text-icon" src="@/static/images/rt2.png">
						</view>
						<view class="c33-r">
							<view></view>
							<view class="text" >
								<view></view><view></view><view></view><view></view>
								<view></view><view></view><view></view><view></view>
								<view></view>
								<view class="text-a isimg"><img  src="@/static/images/abc.jpeg"></view>
							</view>
							<img class="text-icon" src="@/static/images/rt2.png">
						</view>
						<view class="c33-r">
							<view></view>
							<view class="text" >
								<view></view><view></view><view></view><view></view>
								<view></view><view></view><view></view><view></view>
								<view></view>
								<view class="text-a isimg"><img  src="@/static/images/abc.jpeg"></view>
							</view>
							<img class="text-icon" src="@/static/images/rt2.png">
						</view>
					</view>

				</view>
			</view> -->

		</view>
		<view class="bgh"></view>
		<view class="c12">
			<view class="c13">
				<view>
					<input type="text" >
				</view>
				<view class="c14">
					发送
				</view>
			</view>
			<view class="c11">
				<view>
					<img src="static/images/1.jpeg">
				</view>
				<view>
					<img src="static/images/2.jpeg">
				</view>
				<view>
					<img src="static/images/3.jpeg">
				</view>
				<view>
					<img src="static/images/4.jpeg">
				</view>
				<view>
					<img src="static/images/5.jpeg">
				</view>
				<view>
					<img src="static/images/6.jpeg">
				</view>
			</view>
		</view>
		<!-- <view class="c1">
			<view></view>
			<view class="c2 c3">
				<img class="c2 img1" src="@/static/images/bom.jpeg">
			</view>
		</view> -->
	</view>
</template>

<script>
	import config from "@/config/config.js";

	export default {
		data() {
			return {
				title: 'Hello',
				id:0,
				list:[],
				baseurl:config.config.baseurl,
				fid:""
			}
		},
		onShow(){
			
			// console.log(option.id)
		},
		onLoad(option) {
			// console.log(option.id)
			this.id=option.id;
			this.http();
			console.log(this.baseurl);

		},
		methods: {
			toindx(){
				uni.navigateTo({
    				url:"/pages/index/index"
    			});
			},
			http(){

				uni.request({
                	url:"/api/?url=det",
                	method:"POST",
                	header:{
                		'Content-Type':'application/x-www-form-urlencoded'
                	},
                	data:{
                		id:this.id
                	},
                	dataType:"json",
                	success:(res)=>{
                	
                		this.list=res.data.list;
                		this.fid=res.data.fid;
                		console.log(this.list)
                	}
                	
                })
			}
		}
	}
</script>

<style>
	.t{
		    padding-top: 100px;
   padding-bottom: 100px;
	}
	

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin: 200rpx auto 50rpx auto;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
